<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>

<html style="font-size:50px;" g_init="2210240201807052118">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>登录注册</title>
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/aem-h5/aem-h5.css"/>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style>
        #bodyid {
            background: url(<%=path%>/images/marketing/activity_success_bg.png) no-repeat;
            background-size: 100% 100%;
        }
        .entrance-bg {
        	height: 2rem;
        	position: relative;
        }
        .logo-tt {
        	position: absolute;
    		bottom: 0;
        }
    </style>
</head>
<body id="bodyid">
<div id="app">
    <div>
        <input type="hidden" value="<%=path%>" id="pathId">
        <div class="entrance">
            <div class="entrance-bg" style="padding-top:.60rem;margin-bottom:.2rem;">
                <img class="logo" src="">
                <div class="logo-tt" style="margin:.2rem auto 0;">zhfeat</div>
            </div>
            <div class="tabBackgroud">
	            <div class="tab-bg">
	                <div class="mint-navbar" id="navbarid">
	                    <a class="mint-tab-item is-selected">
	                        <div class="mint-tab-item-icon"></div>
	                        <div class="regTabText">注册</div>
	                    </a>
	                    <a class="mint-tab-item">
	                        <div class="mint-tab-item-icon"></div>
	                        <div class="loginTabText">登录</div>
	                    </a>
	                </div>
	                <div class="mint-tab-container" id="tabconid">
	                    <ul class="mint-tab-container-item current" id="reginfo" style="display:block;">
	                        <ul class="login-bg">
	                            <div id="innerHtmlid">
	                                <!-- <li><div>
	                                        <span class="tt">姓名 ：</span><input placeholder="请输入姓名" class="item-input"/>
	                                    </div>
	                                </li>
	                                <li><div>
	                                        <span class="tt">手机 ：</span><input placeholder="请输入手机" class="item-input"/>
	                                    </div>
	                                </li> -->
	                            </div>
	                            <li>
	                                <div class="border-none">
	                                    <div class="left">
	                                        <span class="tt">验证码 :</span><input placeholder="短信验证码" id="smsRegCode"
	                                                                            class="item-input message"/>
	                                    </div>
	                                    <div class="item-input code regSendCode" style="width:auto;" data-flag="1">发送验证码</div>
	                                </div>
	                            </li>
	                            <li>
	                                <div style="border-bottom:.02rem solid #d8d8d8;">
	                                    <span class="tt">邀请码 ：</span><input placeholder="部门邀请码" id="deptCode"
	                                                                        class="item-input"/>
	                                </div>
	                            </li>
	                        </ul>
	                        <div class="remind" id="regRemind" style="top:auto;margin-top:-10px;">
	                            <div class="remind-ct" style="width:200px;">
	                                <img
	                                        src="">
	                                <span id="viewregRem">验证码输入错误</span>
	                            </div>
	                        </div>
	                        <div class="login digister regBtn" style="margin:0.8rem auto 0 !important;">注册</div>
	                    </ul>
	                    <ul class="mint-tab-container-item current" id="loginfo" style="display:none;">
	                        <ul class="login-bg">
	                            <li>
	                                <div style="border-bottom:.02rem solid #d8d8d8;">
	                                    <span class="tt">手机号 ：</span><input id="loginPhone" placeholder="请输入手机号码"
	                                                                        class="item-input"/>
	                                </div>
	                            </li>
	                            <li>
	                                <div class="border-none">
	                                    <div class="left">
	                                        <span class="tt">验证码 :</span><input id="smsLogCode" placeholder="短信验证码"
	                                                                            class="item-input message"/>
	                                    </div>
	                                    <div  class="item-input code loginSendCode" style="width:auto;" data-flagone="1">发送验证码</div>
	                                </div>
	                            </li>
	                        </ul>
	                        <div class="remind" id="logRemind" style="top:auto;margin-top:-10px;">
	                            <div class="remind-ct" style="width:200px;">
	                                <img
	                                        src="">
	                                <span id="logViewRem">验证码输入错误</span>
	                            </div>
	                        </div>
	                        <div class="login digister loginBtn" style="margin:0.8rem auto 0 !important;">登录</div>
	                    </ul>
	                </div>
	            </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/artDialog/7.0.0/dialog-plus.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- 登录注册脚本 - Yanghc -->
<script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
<script type="text/javascript">
    var path = "<%=path%>";
    var bgColor;
    var openId;
    var headImgUrl;
    var priview=1;
    var cid;
    //初始化
    $(function () {
    	if(getQueryString('priview')!=null){
    		priview=getQueryString('priview');
    	}
        cid = getQueryString('cid');
        $("#regRemind").hide();
        $("#logRemind").hide();


        loadStaffProSet();
        loadRegLoginPageStyle();
    });
    
  //加载员工属性
    function loadStaffProSet(){
		var url = path+"/aem/client/loadStaffProSettingData";
		var data = {
				cid:cid
		};
		var e = JSON.parse(syncAjax("post", url , data , false)); 
		if(e.status == "200"){
			var arr = e.data;
			var html_ = '';  
			for(var i = 0 ; i < arr.length ; i ++){
				if(arr[i].keyName=='name' || arr[i].keyName=='phone'){//姓名、手机
					html_ +='<li><div style="border-bottom:.02rem solid #d8d8d8;"><span class="tt">'+arr[i].labelName+' ：</span><input placeholder="'+arr[i].labelContent+'" name="'
				      +arr[i].keyName+'" id='+arr[i].keyName+' class="item-input" /></div><li>'	
				}else if(arr[i].keyName=='idCard'){//身份证号
					html_ +='<li><div style="border-bottom:.02rem solid #d8d8d8;"><span class="tt">'+arr[i].labelName+' ：</span><input placeholder="'+arr[i].labelContent+'" name="'
				      +arr[i].keyName+'" id='+arr[i].keyName+' cardRequired="'+arr[i].required+'" class="item-input" /></div><li>'	
				}else if(arr[i].keyName=='email'){//邮箱
					html_ +='<li><div style="border-bottom:.02rem solid #d8d8d8;"><span class="tt">'+arr[i].labelName+' ：</span><input placeholder="'+arr[i].labelContent+'" name="'
				      +arr[i].keyName+'" id='+arr[i].keyName+' emailRequired="'+arr[i].required+'" class="item-input" /></div><li>'
				}else if(arr[i].keyName=='sex'){
					/*html_ +='<li><div style="border-bottom:.02rem solid #d8d8d8;"><span class="tt">'+arr[i].labelName+' ：</span><input placeholder="'+arr[i].labelContent+'" name="'
					      +arr[i].keyName+'" id='+arr[i].keyName+' readonly sexRequired="'+arr[i].required+'" class="item-input" /></div><li>'*/
					html_ +='<li><div style="border-bottom:.02rem solid #d8d8d8;display:flex;"><span class="tt">'+arr[i].labelName+' ：</span><div style="margin-left:2em;"><input type="radio" value="m" name="'
					      +arr[i].keyName+'"id='+arr[i].keyName+' sexRequired="'+arr[i].required+'"/><span style="margin-left:0.5em;">男</span></div><div style="margin-left:2em;"><input type="radio" value="f" name="'+arr[i].keyName+'" /><span style="margin-left:0.5em;">女</span></div></div><li>'
				}else if(arr[i].keyName == 'birthday'){//生日
					html_ +='<li><div style="border-bottom:.02rem solid #d8d8d8;"><span class="tt">'+arr[i].labelName+' ：</span><input readonly placeholder="'+arr[i].labelContent+'" name="'
				      +arr[i].keyName+'" id='+arr[i].keyName+' readonly birRequired="'+arr[i].required+'" class="item-input" /></div><li>'
				}else if(arr[i].keyName =='detailAddress'){//地址
					html_ +='<li><div style="border-bottom:.02rem solid #d8d8d8;"><span class="tt">'+arr[i].labelName+'：</span><input readonly areaRequired="'+arr[i].required+'" readonly placeholder="" id="address" class="item-input" /></div></li><li><div><input deRequired="'+arr[i].required+'" placeholder="'+arr[i].labelContent+'" style="margin-left:0px;width:100%;" class="item-input" id="'+arr[i].keyName+'"></div></li>'
					       
				}
			}
			$("#innerHtmlid").append(html_); 
			loadRegLoginPageStyle();
		}else{
			remindDialog(e.message);
		}
	}
    
    
    //加载页面配置参数
    function loadRegLoginPageStyle(){
		var url =path+"/aem/client/loadRegLoginPageStyle";
		var data = {
				cid:cid,
				previewType:priview
		};
		var e = JSON.parse(syncAjax("post", url , data , false)); 
		if(e.status == "200"){
			var obj;
			if(priview==1){
				obj=e.data;
			}else{
				obj=JSON.parse(e.data);
			}
			//背景图片不为空
		    if(isEmpty(obj.backPic)){
		    	$("#bodyid").css("background-image","url(" + obj.backPic + ")");
		    }
		    //企业名称
		    if(isEmpty(obj.companyName)){
		    	$(".logo-tt").html(obj.companyName);
		    }
		    //企业名称颜色
		    if(isEmpty(obj.companyNameColor)){
		    	$(".logo-tt").css("color",obj.companyNameColor);
		    }
		    //是否显示logo
		    if(obj.isCompanyLogoShow==1){
		    	$(".logo").show();
		    	$(".logo").attr("src",obj.companyLogo);
		    }else{
		    	$(".logo").hide();
		    }
		    //注册tab文本
		    if(isEmpty(obj.tabSignText)){
		    	$(".regTabText").html(obj.tabSignText);
		    }
		    //登录tab文本
		    if(isEmpty(obj.tabLoginText)){
		    	$(".loginTabText").html(obj.tabLoginText);
		    }
		    //注册、登录tab文字颜色
		    if(isEmpty(obj.tabTextColor)){
		    	$(".regTabText").css("color",obj.tabTextColor);
		    	$(".loginTabText").css("color",obj.tabTextColor);
		    }else{
		    	$(".regTabText").addClass("mint-tab-item-label");
		    	$(".loginTabText").addClass("mint-tab-item-label");
		    }
		    //注册、登录tab背景颜色 
		    if(isEmpty(obj.tabBackColor)){
		    	bgColor=obj.tabBackColor;
		    	$(".is-selected").css("border-bottom","2px solid"+obj.tabBackColor);
		    	$(".is-selected").removeClass("is-selected");
		    }
		    //注册、登录按钮颜色
		    if(isEmpty(obj.buttonBackColor)){
		    	$(".regBtn").css("background-color",obj.buttonBackColor);
		    	$(".loginBtn").css("background-color",obj.buttonBackColor);
		    }
		    //登录按钮文本
		    if(isEmpty(obj.buttonLoginText)){
		    	$(".loginBtn").html(obj.buttonLoginText);
		    }
		    //注册按钮文本
		    if(isEmpty(obj.buttonSignText)){
		    	$(".regBtn").html(obj.buttonSignText);
		    }
		}else{
			remindDialog(e.message);
		}
	}
    
    
    //提醒框
    function remindDialog(mes){
		  $("#viewregRem").html(mes);
		  $("#regRemind").show().delay(3000).fadeOut();
	    }
    
    //是否为空
     function isEmpty(content) {
		if (content == undefined || content == "" || content == null || content=="undefined" || content =="null") {
			return false;
		} else {
			return true;
		}
    }
    //ajax提交
     function syncAjax(type_, url_, data_  , async_) {
 		var msg_ = null;
 		$.ajax({
 				dataType : "text",
 				type : type_,
 				url : url_,
 				data : data_,
 				async : async_, 
 				success : function(msg) {
 						msg_ = msg;
 				},
 				error : function(msg) {
 						msg_ = msg;
 				}
 		});
 		return msg_;
 	}

    //tab 切换
    $('#navbarid a').click(function () {
        var i = $(this).index();
        $(this).addClass('is-selected').siblings().removeClass('is-selected');
        if (bgColor != null) {
            $(this).addClass('is-selected').siblings().removeAttr("style");
        }
        $(".current").hide();
        if (i == 0) {
            $("#reginfo").show();
        } else {
            $("#loginfo").show();
        }
        if (bgColor != null) {
            $(".is-selected").css("border-bottom", "2px solid" + bgColor);
            $(this).removeClass("is-selected");
        }
    });
</script>